<template>
  <div id="app" ref="DivApp" style="height: 100%; width: 100%">
    <div ref="DivButtons">
      <div>
        <!--  <button  @click="ChangePeriod(0)">日线</button>
	                <button  @click="ChangePeriod(4)">1分钟</button>
	                <button  @click="ChangePeriod(6)">15分钟</button>
	                <button  @click="ChangeMinute()">分时</button>
	                <button  @click="ChangeSymbol('000001.sz')">平安银行</button>
	                <button  @click="ChangeSymbol('600999.sh')">招商银行</button> -->
      </div>
    </div>

    <div>
      <div id="kline" ref="DivKLine" class="hqchart" style="height: 400px; width: 500px"></div>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
import { onMounted, computed, onUnmounted, ref } from 'vue'
import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'

function DefaultData() {}
let hqchartdata = {}
DefaultData.GetKLineOption = function () {
  let data = {
    Type: '历史K线图',
    Language: 'TC',
    //窗口指标
    Windows: [
      {
        Index: 'MA',
        Modify: false,
        Change: false,
      },
      {
        Index: 'VOL',
        Modify: false,
        Change: false,
      },
    ],

    IsAutoUpdate: true,
    IsCorssOnlyDrawKLine: true,
    CorssCursorTouchEnd: true,
    IsClickShowCorssCursor: true,
    CorssCursorInfo: {
      Left: 2,
      Right: 2,
      Bottom: 1,
      IsShowCorss: true,
    }, //十字光标刻度设置
    IsFullDraw: true,

    //边框
    Border: {
      Left: 1,
      Right: 1, //右边间距
      Top: 25,
      Bottom: 25,
    },

    KLine: {
      DragMode: 1,
      Right: 1, //复权 0 不复权 1 前复权 2 后复权
      Period: 4, //周期: 0 日线 1 周线 2 月线 3 年线
      PageSize: 6,
      IsShowTooltip: true,
      DrawType: 0,
      DataWidth: 10,
    },

    //K线标题栏设置
    KLineTitle: {
      DateTimeSpace: 1,
      PeriodSpace: 1,
      NameSpace: 1,
    },

    ExtendChart: [
      {
        // Name: 'KLineTooltip'
      }, //开启手机端tooltip
    ],

    //子框架设置
    Frame: [
      {
        SplitCount: 0,
        Custom: [
          {
            Type: 0,
            Position: 'right',
          },
        ],
      },
      {
        SplitCount: 2,
      },
      {
        SplitCount: 3,
      },
    ],
  }

  return data
}

DefaultData.GetMinuteOption = function () {
  //分时图配置信息
  var option = {
    Type: '分钟走势图', //创建图形类型
    //Type:'分钟走势图横屏',

    //窗口指标
    Windows: [
      //{Index:"MACD", Modify:true, Change:false, Close:false }
      //{Index:"涨跌趋势", Modify:false,Change:false},
    ],

    Symbol: '000001.sz',
    IsAutoUpdate: true, //是自动更新数据
    AutoUpdateFrequency: 1000, //数据更新频率
    DayCount: 1, //1 最新交易日数据 >1 多日走势图
    IsShowRightMenu: true, //是否显示右键菜单

    //CorssCursorInfo:{  Left:2, Right:2, Bottom:1,RightTextFormat:1 },

    MinuteLine: {
      IsDrawAreaPrice: true, //是否画价格面积图
      IsShowAveragePrice: true, //不显示均线
    },

    MinuteTitle: {
      IsShowTime: true,
      IsShowName: true,
      IsShowDate: false,
    },

    //EnableBorderDrag:false,

    //边框
    Border: {
      Left: 1, //左边间距
      Right: 1, //右边间距
      Top: 25,
      Bottom: 25,
    },

    //子框架设置
    Frame: [
      {
        SplitCount: 5,
        Custom: [
          {
            Type: 1,
            Position: 'left',
            LineType: 0,
            Data: [
              {
                Value: 15.8,
                Color: 'rgb(0,34,255)',
                TextColor: 'rgb(255,255,255)',
              },
            ],
          },
        ],
      },
      {
        SplitCount: 3,
      },
    ],

    //扩展图形
    ExtendChart: [
      //{Name:'MinuteTooltip' }  //手机端tooltip
    ],
  }

  return option
}

export default {
  name: 'HQChartDemo',
  setup(props, context) {
    const HQChartData = {
      Symbol: '600000.sh', //代码
      Chart: null, //图形控件
    }

    var DivApp = ref(null)
    var DivKLine = ref(null)
    var DivButtons = ref(null)
    onMounted(() => {
      // console.log(HQChart.Chart.JSConsole)
      HQChart.Chart.JSConsole.Chart.Log = () => {}
      HQChart.Chart.JSConsole.Complier.Log = () => {}
      var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(
        HQChart.Chart.STYLE_TYPE_ID.BLACK_ID
      ) //指定样式BLACK_ID黑色，默认白色
      HQChart.Chart.JSChart.SetStyle(blackStyle) //设置指定的样式
      window.onresize = () => {
        OnSize()
      }
    })
    onUnmounted(() => {})
    //内部接口
    const OnSize = function () {
      var app = DivApp.value
      // console.log(app.value);
      var height = app.offsetHeight
      var width = app.offsetWidth
      // console.log(`[HQChartDemo::OnSize] width=${width} height=${height}`);

      var groupbutton = DivButtons.value
      var buttonsHeight = groupbutton.offsetHeight

      //获取屏幕大小 动态设置K线的div大小
      var kline = DivKLine.value
      kline.style.width = width + 'px'
      kline.style.height = height - buttonsHeight + 'px'

      if (HQChartData.Chart) HQChartData.Chart.OnSize()
    }
    const ClearChart = function () {
      if (HQChartData.Chart) {
        HQChartData.Chart.StopAutoUpdate()
        HQChartData.Chart = null
      }
      var divKLine = document.getElementById('kline')
      while (divKLine.hasChildNodes()) {
        divKLine.removeChild(divKLine.lastChild)
      }
    }
    const Lang = computed(() => {
      return Cookies.get('Lang')
    })
    const HqchartData = ref({})
    //创建走势图
    const CreateKLineChart = function (period, data) {
      HqchartData.value = data
      ClearChart()
      var option = DefaultData.GetKLineOption()
      if (Lang.value == 'nogu') {
        option.Language = 'EN'
      } else if (Lang.value == 'zh') {
        option.Language = 'CN'
      } else if (Lang.value == 'zhtw') {
        option.Language = 'TC'
      }
      option.Symbol = HQChartData.Symbol
      option.Period = period
      var divKLine = document.getElementById('kline')
      HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null
      var chart = HQChart.Chart.JSChart.Init(divKLine)
      option.NetworkFilter = MYNetworkFilter
      chart.SetOption(option)
      HQChartData.Chart = chart
    }
    const MYNetworkFilter = function (data, callback) {
      data.PreventDefault = true
      callback(HqchartData.value)
    }
    const ChangePeriod = function (
      period //K线图切换周期
    ) {
      if (IsKLineChart()) HQChartData.Chart.ChangePeriod(period)
      else CreateKLineChart(period)
    }

    const ChangeMinute = function () //分时图
    {
      if (IsMinuteChart()) return
      else {
        CreateMinuteChart()
      }
    }

    const ChangeSymbol = function (
      symbol //切换股票
    ) {
      HQChartData.Symbol = symbol
      HQChartData.Chart.ChangeSymbol(HQChartData.Symbol)
    }

    const IsKLineChart = function () {
      if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return
      return HQChartData.Chart.JSChartContainer.ClassName == 'KLineChartContainer'
    }

    const IsMinuteChart = function () {
      if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return
      return HQChartData.Chart.JSChartContainer.ClassName == 'MinuteChartContainer'
    }

    //创建分时图
    const CreateMinuteChart = function () {
      ClearChart()
      var option = DefaultData.GetMinuteOption()
      option.Symbol = HQChartData.Symbol
      var divKLine = document.getElementById('kline')
      HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null
      var chart = HQChart.Chart.JSChart.Init(divKLine)
      //option.NetworkFilter=this.NetworkFilter;
      chart.SetOption(option)
      HQChartData.Chart = chart
    }
    //切换指标 windowId=窗口索引 name=指标名字
    const ChangeKLineIndex = function (windowId, name) {
      // console.log(HQChartData.Chart.ChangeIndex(windowId, name))
      HQChartData.Chart.ChangeIndex(windowId, name)
      // var jsChart = HQChartData.Chart.JSChartContainer;
      // if (IsKLineChart() && jsChart) jsChart.ChangeIndex(windowId, name);
    }
    return {
      //hqchart数据
      //HQChartData,

      //DOM元素
      DivApp,
      DivKLine,
      DivButtons,

      OnSize,
      CreateKLineChart,
      ChangeKLineIndex,
      //导出函数
      ChangePeriod, //切换K线周期
      ChangeMinute, //切换走势图
      ChangeSymbol, //切换代码
    }
  },
}
</script>

<style>
.hqchart {
  position: relative;
}
</style>
